<template>
  <section class="recom">
    <p class="title thide" @keyup="$emit('changeKeyword',item.name)"  @click="$emit('changeKeyword',keywords)">搜索“{{keywords}}”</p>
    <ul class="list" v-if="suggestList.length>0">
      <li class="item" v-for="item in suggestList" :key="item.id" @click="$emit('changeKeyword',item.name)">
        <i class="recom-search"></i>
        <span class="thide">{{item.name}}</span>
      </li>
    </ul>
    <music-loading v-else></music-loading>
  </section>
</template>
<script>
import MusicLoading from "@/components/MusicLoading.vue"
export default {
  props:{
    keywords:String,
  },
  data(){
    return{
      suggestList:[]
    }
  },
  created(){
    this.getSuggestList()
  },
  methods:{
    async getSuggestList(){
      let res=await this.axios.get(`/search/suggest?keywords=${this.keywords}`)
      let suggestAll=[]
      if(res && res.result && res.result.order){
        res.result.order.forEach(item => {
          suggestAll=suggestAll.concat(res.result[item])
        });
        this.suggestList=suggestAll
      }
    }
  },
  watch: {
    keywords() {
      this.getSuggestList();
    }
	},
  components:{
    MusicLoading,
  }
}
</script>
<style lang="less" scoped>
.recom {
  .title {
    position: relative;
    height: 50px;
    margin-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 50px;
    color: #507daf;
    &::after {
      position: absolute;
      content: "";
      border: 0 solid rgba(0, 0, 0, 0.1);
      bottom: 0;
      left: 0;
      box-sizing: border-box;
      width: 100%;
      border-bottom-width: 1px;
    }
  }
  .list {
    .item {
      display: flex;
      height: 45px;
      padding-left: 10px;
      align-items: center;
      .recom-search {
        background: url("../assets/search.svg") no-repeat;
        width: 15px;
        height: 15px;
        margin-right: 7px;
      }
      & > span {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        line-height: 45px;
        padding-right: 15px;
        font-size: 15px;
        flex: 1;
        width: 1%;
        &::after {
          position: absolute;
          content: "";
          border: 0 solid rgba(0, 0, 0, 0.1);
          bottom: 0;
          left: 0;
          box-sizing: border-box;
          width: 100%;
          border-bottom-width: 1px;
        }
      }
    }
  }
  .thide{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
}
</style>